<template>
  <div class="model-settings">
    <h3 class="settings-title">模型设置</h3>
    
    <el-tabs v-model="activeTab" class="model-tabs">
      <el-tab-pane label="本地模型" name="local">
        <div class="tab-content">
          <div class="model-type-info">
            <i class="fa fa-info-circle"></i>
            <span>本地模型直接从OLLAMA读取，需要确保OLLAMA已正确安装并启动</span>
          </div>
          
          <div class="loading-spinner" v-if="loadingOllama">
            <el-spinner size="small" /> 加载模型中...
          </div>
          
          <div class="connection-error" v-else-if="ollamaError">
            <i class="fa fa-exclamation-triangle"></i>
            <p>无法连接至OLLAMA服务，请确保服务已启动并可访问</p>
            <el-button type="primary" size="small" @click="refreshOllamaModels">
              <i class="fa fa-refresh"></i> 重试连接
            </el-button>
          </div>
          
          <div v-else>
            <div class="form-item">
              <div class="form-label">
                <span class="label-text">OLLAMA地址</span>
              </div>
              <el-input 
                v-model="localSettings.endpoint" 
                placeholder="如：http://localhost:11434"
                :disabled="loadingOllama"
              >
                <template #append>
                  <el-button @click="refreshOllamaModels">
                    <i class="fa fa-refresh"></i>
                  </el-button>
                </template>
              </el-input>
            </div>
            
            <div class="form-item">
              <div class="form-label">
                <span class="label-text">选择模型</span>
              </div>
              <el-select 
                v-model="localSettings.modelName" 
                placeholder="请选择模型" 
                :disabled="loadingOllama || ollamaModels.length === 0"
                style="width: 100%;"
              >
                <el-option 
                  v-for="model in ollamaModels" 
                  :key="model.name" 
                  :label="model.name" 
                  :value="model.name"
                >
                  <div class="model-option">
                    <span>{{ model.name }}</span>
                    <small>{{ formatSize(model.size) }}</small>
                  </div>
                </el-option>
              </el-select>
            </div>
            
            <div class="model-params">
              <div class="param-title">参数设置</div>
              
              <div class="param-item">
                <div class="param-label">
                  <span>温度</span>
                  <el-tooltip content="较低的值使输出更加准确和确定，较高的值使输出更加随机和创造性">
                    <i class="fa fa-question-circle"></i>
                  </el-tooltip>
                </div>
                <div class="param-control">
                  <el-slider 
                    v-model="localSettings.params.temperature" 
                    :min="0" 
                    :max="1" 
                    :step="0.1" 
                    show-stops
                  />
                  <span class="param-value">{{ localSettings.params.temperature }}</span>
                </div>
              </div>
              
              <div class="param-item">
                <div class="param-label">
                  <span>最大Token</span>
                  <el-tooltip content="限制模型生成的最大标记数量">
                    <i class="fa fa-question-circle"></i>
                    </el-tooltip>
                </div>
                <div class="param-control">
                  <el-input-number 
                    v-model="localSettings.params.max_tokens" 
                    :min="100" 
                    :max="4096" 
                    :step="100"
                    size="small"
                    style="width: 120px;"
                  />
                </div>
              </div>
            </div>
            
            <div class="form-actions">
              <el-button 
                type="primary" 
                @click="applyLocalModel(localSettings)" 
                :disabled="!canApplyLocal"
              >
                应用模型
              </el-button>
              <el-button 
                @click="testLocalConnection(localSettings)" 
                :disabled="!canTestLocal"
              >
                测试连接
              </el-button>
            </div>
          </div>
        </div>
      </el-tab-pane>
      
      <el-tab-pane label="远程模型" name="remote">
        <div class="tab-content">
          <div class="model-type-info">
            <i class="fa fa-info-circle"></i>
            <span>远程模型支持OpenAI、Azure等API接入，API密钥将安全存储</span>
          </div>
          
          <div class="loading-spinner" v-if="loadingRemoteModels">
            <el-spinner size="small" /> 加载模型中...
          </div>
          
          <template v-else>
            <div class="form-item">
              <div class="form-label">
                <span class="label-text">选择已保存的模型</span>
              </div>
              <el-select 
                v-model="selectedRemoteModelId" 
                placeholder="选择已保存模型" 
                style="width: 100%;"
                @change="handleRemoteModelChange"
              >
                <el-option 
                  v-for="model in remoteModels" 
                  :key="model.id" 
                  :label="model.name" 
                  :value="model.id"
                >
                  <div class="model-option">
                    <span>{{ model.name }}</span>
                    <small>{{ model.provider }}</small>
                  </div>
                </el-option>
              </el-select>
            </div>
            
            <div class="model-form">
              <div class="form-item">
                <div class="form-label">
                  <span class="label-text">模型名称</span>
                </div>
                <el-input 
                  v-model="remoteSettings.name" 
                  placeholder="为模型配置命名"
                />
              </div>
              
              <div class="form-item">
                <div class="form-label">
                  <span class="label-text">提供商</span>
                </div>
                <el-select 
                  v-model="remoteSettings.provider" 
                  placeholder="选择提供商" 
                  style="width: 100%;"
                >
                  <el-option label="OpenAI" value="openai" />
                  <el-option label="Azure" value="azure" />
                  <el-option label="Anthropic" value="anthropic" />
                  <el-option label="DeepSeek" value="deepseek" />
                  <el-option label="其他" value="other" />
                </el-select>
              </div>
              
              <div class="form-item">
                <div class="form-label">
                  <span class="label-text">API端点</span>
                </div>
                <el-input 
                  v-model="remoteSettings.endpoint" 
                  placeholder="如：https://api.openai.com"
                />
              </div>
              
              <div class="form-item">
                <div class="form-label">
                  <span class="label-text">API密钥</span>
                </div>
                <el-input 
                  v-model="remoteSettings.apiKey" 
                  placeholder="输入API密钥"
                  type="password"
                  show-password
                />
              </div>
              
              <div class="model-params">
                <div class="param-title">参数设置</div>
                
                <div class="param-item">
                  <div class="param-label">
                    <span>模型名称</span>
                    <el-tooltip content="特定提供商的模型名称">
                      <i class="fa fa-question-circle"></i>
                    </el-tooltip>
                  </div>
                  <div class="param-control" style="width: 100%;">
                    <el-select 
                      v-model="remoteSettings.params.model_name" 
                      placeholder="选择模型" 
                      style="width: 100%;"
                      v-if="remoteSettings.provider === 'openai'"
                    >
                      <el-option label="gpt-3.5-turbo" value="gpt-3.5-turbo" />
                      <el-option label="gpt-4" value="gpt-4" />
                      <el-option label="gpt-4-turbo" value="gpt-4-turbo" />
                      <el-option label="gpt-4o" value="gpt-4o" />
                    </el-select>
                    
                    <el-select 
                      v-model="remoteSettings.params.model_name" 
                      placeholder="选择模型" 
                      style="width: 100%;"
                      v-else-if="remoteSettings.provider === 'anthropic'"
                    >
                      <el-option label="claude-2" value="claude-2" />
                      <el-option label="claude-3-opus" value="claude-3-opus" />
                      <el-option label="claude-3-sonnet" value="claude-3-sonnet" />
                      <el-option label="claude-3-haiku" value="claude-3-haiku" />
                    </el-select>
                    
                    <el-select 
                      v-model="remoteSettings.params.model_name" 
                      placeholder="选择模型" 
                      style="width: 100%;"
                      v-else-if="remoteSettings.provider === 'deepseek'"
                    >
                      <el-option label="deepseek-chat" value="deepseek-chat" />
                      <el-option label="deepseek-coder" value="deepseek-coder" />
                    </el-select>
                    
                    <el-input 
                      v-else
                      v-model="remoteSettings.params.model_name" 
                      placeholder="输入模型名称"
                    />
                  </div>
                </div>
                
                <div class="param-item">
                  <div class="param-label">
                    <span>温度</span>
                    <el-tooltip content="较低的值使输出更加准确和确定，较高的值使输出更加随机和创造性">
                      <i class="fa fa-question-circle"></i>
                    </el-tooltip>
                  </div>
                  <div class="param-control">
                    <el-slider 
                      v-model="remoteSettings.params.temperature" 
                      :min="0" 
                      :max="1" 
                      :step="0.1" 
                      show-stops
                    />
                    <span class="param-value">{{ remoteSettings.params.temperature }}</span>
                  </div>
                </div>
                
                <div class="param-item">
                  <div class="param-label">
                    <span>最大Token</span>
                    <el-tooltip content="限制模型生成的最大标记数量">
                      <i class="fa fa-question-circle"></i>
                    </el-tooltip>
                  </div>
                  <div class="param-control">
                    <el-input-number 
                      v-model="remoteSettings.params.max_tokens" 
                      :min="100" 
                      :max="8192" 
                      :step="100"
                      size="small"
                      style="width: 120px;"
                    />
                  </div>
                </div>
              </div>
              
              <div class="form-actions">
                <el-button type="primary" @click="saveRemoteModel" :disabled="!canSaveRemote">
                  保存模型
                </el-button>
                <el-button 
                  type="success" 
                  @click="applyRemoteModel" 
                  :disabled="!canApplyRemote"
                >
                  应用模型
                </el-button>
                <el-button @click="testRemoteConnection" :disabled="!canTestRemote">
                  测试连接
                </el-button>
              </div>
            </div>
          </template>
        </div>
      </el-tab-pane>
    </el-tabs>
  </div>
</template>

<script setup>
import { ref, reactive, computed, onMounted, watch } from 'vue';
import { ElMessage, ElLoading } from 'element-plus';
import { 
  getOllamaModels, 
  getAIModelList, 
  saveAIModelConfig, 
  testAIModel 
} from '/@/api/backend/yxerp/aichat';

// 定义属性
const props = defineProps({
  activeModel: {
    type: Object,
    default: null
  }
});

// 定义事件
const emit = defineEmits(['model-changed']);

// 状态变量
const activeTab = ref('local');
const loadingOllama = ref(false);
const ollamaError = ref(false);
const ollamaModels = ref([]);
const loadingRemoteModels = ref(false);
const remoteModels = ref([]);
const selectedRemoteModelId = ref(null);
const localModelId = ref(null);
// 本地模型设置
const localSettings = reactive({
  endpoint: 'http://localhost:11434',
  modelName: '',
  params: {
    temperature: 0.7,
    max_tokens: 2048
  }
});

// 远程模型设置
const remoteSettings = reactive({
  id: null,
  name: '',
  provider: 'openai',
  endpoint: 'https://api.openai.com',
  apiKey: '',
  params: {
    model_name: '',
    temperature: 0.7,
    max_tokens: 2048
  }
});

// 计算属性
const canApplyLocal = computed(() => {
  return localSettings.endpoint && localSettings.modelName;
});

const canTestLocal = computed(() => {
  return localSettings.endpoint;
});

const canSaveRemote = computed(() => {
  return (
    remoteSettings.name && 
    remoteSettings.provider && 
    remoteSettings.endpoint && 
    remoteSettings.apiKey && 
    remoteSettings.params.model_name
  );
});

const canApplyRemote = computed(() => {
  return (
    remoteSettings.name && 
    remoteSettings.provider && 
    remoteSettings.endpoint && 
    remoteSettings.apiKey && 
    remoteSettings.params.model_name
  );
});

const canTestRemote = computed(() => {
  return (
    remoteSettings.provider && 
    remoteSettings.endpoint && 
    remoteSettings.apiKey && 
    remoteSettings.params.model_name
  );
});

// 监听activeTab变化
watch(activeTab, (newTab) => {
  if (newTab === 'local' && ollamaModels.value.length === 0) {
    refreshOllamaModels();
  } else if (newTab === 'remote' && remoteModels.value.length === 0) {
    loadRemoteModels();
  }
});

// 初始化
onMounted(async () => {
  // 根据当前活动模型设置默认标签
  if (props.activeModel) {
    activeTab.value = props.activeModel.type === 'local' ? 'local' : 'remote';
    
    if (props.activeModel.type === 'local') {
      localSettings.endpoint = props.activeModel.endpoint || 'http://localhost:11434';
      localSettings.modelName = props.activeModel.name;
      if (props.activeModel.params) {
        localSettings.params.temperature = props.activeModel.params.temperature || 0.7;
        localSettings.params.max_tokens = props.activeModel.params.max_tokens || 2048;
      }
      
      // 加载本地模型列表
      await refreshOllamaModels();
    } else {
      // 加载远程模型列表
      await loadRemoteModels();
      
      if (props.activeModel.id) {
        selectedRemoteModelId.value = props.activeModel.id;
        // 通过ID找到对应的远程模型并加载设置
        const model = remoteModels.value.find(m => m.id === props.activeModel.id);
        if (model) {
          loadRemoteModelSettings(model);
        }
      }
    }
  } else {
    // 默认加载本地模型
    refreshOllamaModels();
  }
});

// 加载OLLAMA模型列表
async function refreshOllamaModels() {
  loadingOllama.value = true;
  ollamaError.value = false;
  
  try {
    const res = await getOllamaModels();
    console.log(res);
    if (res.code === 1) {
      ollamaModels.value = res.data || [];
      
      // 如果未选择模型或当前选择的模型不在列表中，自动选择一个
      if (!localSettings.modelName || !ollamaModels.value.find(m => m.name === localSettings.modelName)) {
        // 优先选择 deepseek 模型
        const deepseekModel = ollamaModels.value.find(m => m.name.toLowerCase().includes('deepseek'));
        if (deepseekModel) {
          localSettings.modelName = deepseekModel.name;
        } else if (ollamaModels.value.length > 0) {
          localSettings.modelName = ollamaModels.value[0].name;
        }
      }
    }
  } catch (error) {
    console.error('加载OLLAMA模型失败:', error);
    ollamaError.value = true;
  } finally {
    loadingOllama.value = false;
  }
}

// 加载远程模型列表
async function loadRemoteModels() {
  loadingRemoteModels.value = true;
  
  try {
    const res = await getAIModelList();
    if (res.code === 1) {
      remoteModels.value = res.data.filter(model => model.type === 'remote') || [];
    } else {
      ElMessage.error(res.data.msg || '加载远程模型失败');
    }
  } catch (error) {
    console.error('加载远程模型列表失败:', error);
    ElMessage.error('加载远程模型列表失败');
  } finally {
    loadingRemoteModels.value = false;
  }
}

// 测试本地连接
async function testLocalConnection() {
  if (!localSettings.endpoint || !localSettings.modelName) {
    ElMessage.warning('请输入OLLAMA地址');
    return;
  }
  
  const loading = ElLoading.service({
    lock: true,
    text: '正在测试连接...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  try {
    const res = await testAIModel({
      type: 'local',
      provider: 'ollama',
      endpoint: localSettings.endpoint,
      model_name: localSettings.modelName
    });
    console.log(res);
    if (res.code === 1) {
      ElMessage.success('成功连接到OLLAMA服务');
      
      // 更新模型列表
      if (res.data && res.data.models) {
        ollamaModels.value = res.data.models;
      }
    }
  } catch (error) {
    console.error('连接OLLAMA失败:', error);
    ElMessage.error('无法连接到OLLAMA服务');
  } finally {
    loading.close();
  }
}

// 应用本地模型
async function applyLocalModel() {
  if (!localSettings.endpoint || !localSettings.modelName) {
    ElMessage.warning('请选择模型');
    return;
  }
  
  const modelData = {
    id: localModelId.value,
    name: `本地: ${localSettings.modelName}`,
    type: 'local',
    provider: 'ollama',
    endpoint: localSettings.endpoint,
    model_name: localSettings.modelName,
    params: localSettings.params
  };
  
  try {
    const res = await saveAIModelConfig(modelData);
    console.log(res);
    if (res.code === 1) {
      ElMessage.success('模型已应用');
      
      // 更新本地存储的模型ID
      localModelId.value = res.data.id;
      
      // 通知父组件模型已更改
      emit('model-changed', {
        id: res.data.data.id,
        name: modelData.name,
        type: 'local',
        provider: 'ollama',
        endpoint: localSettings.endpoint,
        model_name: localSettings.modelName,
        params: localSettings.params
      });
    } else {
      ElMessage.error(res.data.msg || '应用模型失败');
    }
  } catch (error) {
    console.error('Failed to apply local model:', error);
    ElMessage.error('应用模型时出错');
  }
}

// 处理远程模型变更
function handleRemoteModelChange(modelId) {
  const model = remoteModels.value.find(m => m.id === modelId);
  if (model) {
    loadRemoteModelSettings(model);
  }
}

// 加载远程模型设置
function loadRemoteModelSettings(model) {
  remoteSettings.id = model.id;
  remoteSettings.name = model.name;
  remoteSettings.provider = model.provider;
  remoteSettings.endpoint = model.endpoint;
  remoteSettings.apiKey = model.api_key || '';
  
  // 解析参数
  try {
    let params;
    if (typeof model.params === 'string') {
      params = JSON.parse(model.params);
    } else {
      params = model.params;
    }
    
    remoteSettings.params.model_name = params.model_name || '';
    remoteSettings.params.temperature = params.temperature !== undefined ? params.temperature : 0.7;
    remoteSettings.params.max_tokens = params.max_tokens || 2048;
  } catch (error) {
    console.error('解析模型参数失败:', error);
    remoteSettings.params.model_name = '';
    remoteSettings.params.temperature = 0.7;
    remoteSettings.params.max_tokens = 2048;
  }
}

// 保存远程模型
async function saveRemoteModel() {
  if (!remoteSettings.name || !remoteSettings.provider || 
      !remoteSettings.endpoint || !remoteSettings.apiKey || 
      !remoteSettings.params.model_name) {
    ElMessage.warning('请完成所有必填项');
    return;
  }
  
  const modelData = {
    id: selectedRemoteModelId.value || 0,
    name: remoteSettings.name,
    type: 'remote',
    provider: remoteSettings.provider,
    endpoint: remoteSettings.endpoint,
    api_key: remoteSettings.apiKey,
    model_name: remoteSettings.params.model_name,
    params: remoteSettings.params
  };
  
  try {
    const res = await saveAIModelConfig(modelData);
    if (res.code === 1) {
      ElMessage.success('模型已保存');
      
      // 更新选中的模型ID
      selectedRemoteModelId.value = res.data.data.id;
      
      // 重新加载远程模型列表
      loadRemoteModels();
      
      // 通知父组件模型已更改
      emit('model-changed', {
        id: res.data.data.id,
        name: remoteSettings.name,
        type: 'remote',
        provider: remoteSettings.provider,
        endpoint: remoteSettings.endpoint,
        model_name: remoteSettings.params.model_name,
        params: remoteSettings.params
      });
    } else {
      ElMessage.error(res.data.msg || '保存模型失败');
    }
  } catch (error) {
    console.error('Failed to save remote model:', error);
    ElMessage.error('保存模型时出错');
  }
}

// 应用远程模型
function applyRemoteModel() {
  if (!canApplyRemote.value) {
    ElMessage.warning('请填写完整的模型信息');
    return;
  }
  
  const model = {
    type: 'remote',
    id: remoteSettings.id,
    name: remoteSettings.name,
    provider: remoteSettings.provider,
    endpoint: remoteSettings.endpoint,
    apiKey: remoteSettings.apiKey,
    params: {
      model_name: remoteSettings.params.model_name,
      temperature: remoteSettings.params.temperature,
      max_tokens: remoteSettings.params.max_tokens
    }
  };
  
  emit('model-changed', model);
}

// 测试远程连接
async function testRemoteConnection() {
  if (!remoteSettings.provider || !remoteSettings.endpoint || 
      !remoteSettings.apiKey || !remoteSettings.params.model_name) {
    ElMessage.warning('请完成所有必填项');
    return;
  }
  
  const loading = ElLoading.service({
    lock: true,
    text: '正在测试连接...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
  
  try {
    const res = await testAIModel({
      type: 'remote',
      provider: remoteSettings.provider,
      endpoint: remoteSettings.endpoint,
      api_key: remoteSettings.apiKey,
      model_name: remoteSettings.params.model_name
    });
    
    if (res.code === 1) {
      ElMessage.success('连接测试成功');
    } else {
      ElMessage.error(res.msg || '连接测试失败');
    }
  } catch (error) {
    console.error('测试连接失败:', error);
    ElMessage.error('连接测试失败');
  } finally {
    loading.close();
  }
}

// 格式化文件大小
function formatSize(bytes) {
  if (bytes < 1024) return bytes + ' B';
  else if (bytes < 1024 * 1024) return (bytes / 1024).toFixed(2) + ' KB';
  else if (bytes < 1024 * 1024 * 1024) return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
  else return (bytes / (1024 * 1024 * 1024)).toFixed(2) + ' GB';
}
</script>

<style scoped>
.model-settings {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 16px;
  overflow: hidden;
}

.settings-title {
  margin: 0 0 16px 0;
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  background: linear-gradient(90deg, #303133 0%, #606266 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}

.model-tabs {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

:deep(.el-tabs__header) {
  margin-bottom: 12px;
}

:deep(.el-tabs__content) {
  flex: 1;
  overflow: hidden;
}

:deep(.el-tab-pane) {
  height: 100%;
  overflow: hidden;
}

.tab-content {
  height: 100%;
  overflow-y: auto;
  scrollbar-width: thin;
  padding-right: 8px;
}

.tab-content::-webkit-scrollbar {
  width: 6px;
}

.tab-content::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb {
  background: #dcdfe6;
  border-radius: 3px;
}

.tab-content::-webkit-scrollbar-thumb:hover {
  background: #c0c4cc;
}

.model-type-info {
  display: flex;
  align-items: flex-start;
  padding: 10px 12px;
  background: linear-gradient(135deg, #f6fafd 0%, #f0f7ff 100%);
  border-radius: 8px;
  margin-bottom: 16px;
  font-size: 13px;
  color: #606266;
  line-height: 1.5;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.model-type-info i {
  color: #409eff;
  margin-right: 8px;
  font-size: 16px;
  margin-top: 2px;
}

.loading-spinner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100px;
  color: #909399;
}

.connection-error {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: linear-gradient(135deg, #fef0f0 0%, #fde2e2 100%);
  border-radius: 8px;
  margin-bottom: 16px;
  color: #f56c6c;
  text-align: center;
}

.connection-error i {
  font-size: 24px;
  margin-bottom: 8px;
}

.connection-error p {
  margin: 0 0 12px 0;
}

.form-item {
  margin-bottom: 16px;
}

.form-label {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
}

.label-text {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
}

.model-option {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.model-option small {
  color: #909399;
  font-size: 12px;
}

.model-params {
  background: linear-gradient(135deg, #f9fafc 0%, #f5f7fa 100%);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
}

.param-title {
  font-size: 14px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
}

.param-item {
  margin-bottom: 16px;
}

.param-item:last-child {
  margin-bottom: 0;
}

.param-label {
  display: flex;
  align-items: center;
  margin-bottom: 6px;
  font-size: 13px;
  color: #606266;
}

.param-label i {
  margin-left: 4px;
  color: #909399;
  cursor: pointer;
}

.param-control {
  display: flex;
  align-items: center;
}

.param-value {
  margin-left: 8px;
  min-width: 24px;
  text-align: center;
  font-size: 13px;
  color: #409eff;
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 20px;
}

.model-form {
  max-height: calc(100vh - 350px);
  overflow-y: auto;
  padding-right: 8px;
}

:deep(.el-input-number.el-input-number--small) {
  width: 120px;
}

:deep(.el-slider__runway.show-stops) {
  margin: 0;
}

:deep(.el-button) {
  background: linear-gradient(135deg, var(--el-button-bg-color) 0%, var(--el-button-bg-color) 100%);
  transition: all 0.3s;
  border: none;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

:deep(.el-button:hover) {
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

:deep(.el-button--primary) {
  background: linear-gradient(135deg, #409eff 0%, #1890ff 100%);
}

:deep(.el-button--danger) {
  background: linear-gradient(135deg, #f56c6c 0%, #e64242 100%);
}

:deep(.el-button--success) {
  background: linear-gradient(135deg, #67c23a 0%, #4eb722 100%);
}

:deep(.el-button--warning) {
  background: linear-gradient(135deg, #e6a23c 0%, #d58b17 100%);
}

:deep(.el-button--info) {
  background: linear-gradient(135deg, #909399 0%, #73767a 100%);
}
</style> 